::-webkit-scrollbar-track-piece {
background-color:#f8f8f8;
}
::-webkit-scrollbar {
width:9px;
height:9px;
}
::-webkit-scrollbar-thumb {
background-color:#dddddd;
background-clip:padding-box;
min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
}
* {
 margin:0 auto; padding:0px; 
  text-align:center;
    text-decoration:none; 
  
}

.cont_principal { 
  position:absolute;
  width:100%;
  height:100%;  background:url('https://cdn.jsdelivr.net/gh/ChenYFan-Tester/DailyGet@gh-pages/bingpic/bing.jpg')  center / cover;
}

.cont_join {
  background-color: rgb(0 0 0 / 85%);
  overflow:hidden;
  position:absolute;
  width:320px;
  height:460px;
  box-shadow:1px 1px 1000px 1000px rgba(0,0,0,0.2),0px 0px 20px 4px rgba(0,0,0,0.2);
  left:50%;
  top:50%;
  margin-top:-230px;
  margin-left:-160px;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;

}
  .cont_join:hover {
  box-shadow:1px 1px 1000px 1000px rgba(0,0,0,0.5),0px 0px 20px 4px rgba(0,0,0,0.4);

}
.cont_btn_join {  
  position:absolute;
  bottom:0px;
  width:100%;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}

.cont_btn_join > a {
  display:block;
  text-align:center;
  padding:10px 0px;
  background-color:rgba(21, 74, 118,0.82);
  font-size:20px;
  font-family:Arial;
  font-weight:100;
  width:100%;
  color:#fff;
}


.cont_letras { 
  position:relative;
  float:right;
  margin:16px;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}
 
.cont_letras > p {
  position:relative;
  margin: 0px 16px;  
  font-size:48px;
  font-family: 'Josefin Sans';
  font-weight:1000;
  font-style:italic;
  color:#fff;  
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  left:0px;
}

.cont_join_form_act{

}
.cont_join_form_act > .cont_letras {
  right:0px;
  height:0px;  
} 

.cont_join_form_act > .cont_form_join
{
  left:0px;
}
.cont_form_join {
  position: relative;
  width:100%;
  height: calc(100% - 79px);
  float:left;
  left:-320px;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  bottom:0px;
 }

.cont_form_join > h2 {
  font-family: 'Josefin Sans';
  font-wight:800;
  color:#fff;
  font-size:40px;
  margin-top:15px;
}



.cont_form_join > p {
font-family: 'Josefin Sans';
font-weight:700;
color:#fff;
font-size:20px;
margin:15px 0px 2px 15px;
marigin-bottom:2px;
text-align:left;
}

.input_text {    
width:270px;
padding:10px;  
border:1px solid rgba(0,0,0,0.2);  
font-size:20px;
text-align:left;
background-color:rgba(255,255,255,0.7);
color:#777;
}

 
 
.cont_join_finish >  .cont_btn_join {
  bottom:-200px;
}
.cont_join_form_finish {
position:relative;
top:50%;
left:-115px;
}
.cont_join_finish > .cont_join_form_finish {
 left:115px; 
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}


.cont_join_form_finish  > h2 {
  font-family: 'Josefin Sans';
font-weight:700;
color:#fff;
font-size:26px;
}

.cont_join_finish  {
box-shadow:0px 0px;  

}

.cont_join_finish:hover {
  box-shadow:0px 0px;  
}
 